<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">


<body data-type="index">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"></jsp:include>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/left.jsp"></jsp:include>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div id="cardDiv" class="row  am-cf">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <div class="widget widget-primary am-cf">
                            <div class="widget-statistic-header">
                                6222*****196
                            </div>
                            <div class="widget-statistic-body">
                                <div class="widget-statistic-value">
                                    ￥27,294
                                </div>
                                <div class="widget-statistic-description">
                                    
                                </div>
                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
                            </div>
                        </div>
                    </div>
                </div>

               

 <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">最近十笔流水</div>
                                <div class="widget-function am-fr">
                                    
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-bordered am-table-radius am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="flowTop10">
                                        <tr class="gradeX">
                                            <td>6222*****196</td>
                                            <td>200.00</td>
                                            <td>存款</td>
                                            <td>2017-11-26</td>
                                        </tr>
                                        <!-- more data -->
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>

                <a href="http://baidu.com" target="_blank">百度</a>

            </div>
        </div>
    </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.sidebar-nav-link a').removeClass('active');
            $('#userHome').addClass('active');

            listCards();
            listTop10();
        });

        function listTop10() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/card/getFlowTop10.do',
                data: {
                },
                success: function (dataResult) {
                    if (1000 !== dataResult.code) {
                        alert(dataResult.message);
                        return false;
                    }

                    let resutls = dataResult.data;
                    let msg = '';
                    for (let i=0; i<resutls.length; i++) {
                        msg += '<tr class="gradeX">';
                        msg += '<td>'+resutls[i].cardNum+'</td>';
                        msg += '<td>'+resutls[i].amount+'</td>';
                        msg += '<td>'+resutls[i].desc+'</td>';
                        msg += '<td>'+resutls[i].createTime+'</td>';
                        msg += '</tr>';
                    }

                    $('#flowTop10').html(msg);

                },
                error: function (XMLHttpResponse) {
                }
            });
        }

        function listCards() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/card/getBankCards.do',
                data: {
                },
                success: function (dataResult) {
                    if (1000 !== dataResult.code) {
                        alert(dataResult.message);
                        return false;
                    }

                    let resutls = dataResult.data;
                    let msg = '';
                    for (let i=0; i<resutls.length; i++) {
                        msg += '<div class="am-u-sm-12 am-u-md-6 am-u-lg-4">';
                        msg += '<div class="widget widget-primary am-cf">';
                        msg += ' <div class="widget-statistic-header">';
                        msg += resutls[i].cardNum;
                        msg += '</div>';
                        msg += '<div class="widget-statistic-body">';
                        msg += '<div class="widget-statistic-value">';
                        msg += resutls[i].amount;
                        msg += '</div>';
                        msg += '<div class="widget-statistic-description">';
                        msg += '</div>';
                        msg += '<span class="widget-statistic-icon am-icon-credit-card-alt"></span>';
                        msg += '</div></div></div>';
                    }

                    $('#cardDiv').html(msg);

                },
                error: function (XMLHttpResponse) {
                }
            });
        }
    </script>

</body>

</html>